<template>
  <div v-loading="loading" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import china from '@/map/china.json'
echarts.registerMap('china', china)
import resize from './mixins/resize'
import { moneyFormat } from '@/utils/ruoyi'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      loading: false
    }
  },
  watch: {
    chartData() {
      this.loading = true
      this.initChart()
      this.loading = false
    }
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    initChart() {
      var data = this.chartData.map(ele => {
        return {
          name: ele.areaName,
          value: ele.amount === null ? 0 : ele.amount,
          areaId: ele.areaId
        }
      })
      var max = -Infinity
      var min = Infinity
      data.forEach(function(itemOpt) {
        if (itemOpt.value > max) {
          max = itemOpt.value
        }
        if (itemOpt.value < min) {
          min = itemOpt.value
        }
      })
      if (min === max) {
        min = min - 1
      }
      // console.log(min, max)

      var mapName = 'china'
      this.chart = echarts.init(this.$el)

      const geoCoordMap = {}
      const mapFeatures = echarts.getMap(mapName).geoJson.features
      mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp
      })
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              areaId: data[i].areaId
            })
          }
        }
        return res
      }

      // 柱状体的顶部
      var scatterData = function(data) {
        return data.map((item) => {
          return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2]
        })
      }
      // 柱状体的主干
      var lineData = function(data) {
        return data.map((item) => {
          return {
            name: item.name,
            value: item.value,
            coords: [
              geoCoordMap[item.name],
              [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2]
            ]
          }
        })
      }
      var option = {
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function(params) {
            var num = isNaN(params.value) ? '-' : moneyFormat(params.value, 'w', 2)
            let html = '<div>' + params.name + '</div>'
            html += '<div>' + window.i18n.t('投资金额') + window.i18n.t('金额单位') + ': ' + num + '</div>'
            return html
          }
        },

        visualMap: {
          show: false,
          min: min,
          max: max,
          calculable: true,
          text: ['High', 'Low'],
          seriesIndex: [0],
          inRange: {
            symbolSize: [5, 5],
            color: ['#E8EBFF', '#D1D7FF']
          }
        },
        geo: {
          map: 'china',
          roam: true,
          zoom: 1.2,
          itemStyle: {
            normal: {
              areaColor: '#fff',
              borderColor: '#E4E4E4',
              shadowColor: '#BCC6FF',
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#FDC72F'
            }
          },

          regions: [{
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgb(0,243,255)',
              borderColor: 'rgb(0,243,255)',
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: '#009cc9'
                }
              }
            },
            label: {
              show: false,
              color: '#FFFFFF',
              fontSize: 12
            }

          }]

        },
        toolbox: {
          feature: {
            saveAsImage: {
              name: this.$t('项目地域分布')
            }
          }
        },
        series: [
          {
            type: 'map',
            map: 'china',
            zoom: 1.2,
            // geoIndex: 0,
            // aspectScale: 1, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
                normal: {
                    areaColor: '#fff',
                    borderColor: '#E4E4E4',
                    borderWidth: 1
                },
                emphasis: {
                  show: false,
                  areaColor: null
                }
            },
            roam: true,
            animation: false,
            data: data
          },
          // 柱状体的主干
          {
            type: 'lines',
            zlevel: 5,
            lineStyle: {
                width: 5, // 尾迹线条宽度
                opacity: 1, // 尾迹线条透明度'
                curveness: 0, // 尾迹线条曲直度
                color: '#434eb8'
            },
            label: {
                position: 'top',
                normal: {
                    padding: [10, 10],
                    fontSize: '11px',
                    show: false,
                    formatter(p) {
                      return window.i18n.t(p.name) + '\n' + moneyFormat(p.value, 'w', 2)
                    }
                }
            },
            data: lineData(data)
          },
          // 柱状体的顶部
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 5,
            symbol: 'circle',
            symbolSize: [5, 5],
            itemStyle: {
                color: '#434eb8',
                opacity: 1
            },
            data: scatterData(data)
          },
          // 波浪
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 4,
            symbolSize: [4, 2],
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke',
                period: 10,
                scale: 7,
                number: 4
            },
            itemStyle: {
                normal: {
                    color: '#434eb8'
                }
            },
            data: convertData(data)
          }
        ]
      }
      const that = this
      this.chart.setOption(option)
      // 点击地图查询调了2次方法导致查不到去掉一次
      this.chart.off('click')
      this.chart.on('click', function(ev) {
        if (ev.data && ev.data.areaId) {
          that.$emit('clickHandel', ev.data)
        } else {
          that.$emit('clickHandel', '无')
        }
      })
      this.chart.on('georoam', () => {
        const center = this.chart.getOption().series[0].center
        const zoom = this.chart.getOption().series[0].zoom
        this.chart.setOption({
            geo: [
              {
                  zoom,
                  center,
                  animation: false
              }
            ]
        })
      })
    }
  }
}
</script>

<style scoped></style>
